<template>
  <div class="morePage">
    <div class="hd">
      <div @click="goBack" class="hdBack" >
        <img src="../../assets/hdBackMain.png"/>
      </div>
      <div class="hdTitle">{{msg}}</div>
      <div class="c"></div>
    </div>
    <div class="c hh"></div>
    <div>
      <tab :line-width=2 active-color='#FF69BA' v-model = 'moreTitleName' >
        <tab-item class="vux-center" :selected="moreTitleName === item" v-for="(item, index) in moreTitle" @click="moreTitleName = item" :key="index">{{item}}</tab-item>
      </tab>
      <panel :list="list" :type="type"></panel>
    </div>
  </div>
</template>
<script>
  import { Tab, TabItem, Panel } from 'vux'
  export default {
    name: 'morePage',
    components: {
      Tab,
      TabItem,
      Panel
    },
    data () {
      return {
        msg: '热门精选',
        moreTitle: ['最新', '热门', '价格'],
        contentTip: this.$route.params.contentTip,
        moreTitleName: 0,
        type: '1', // 对应不同的布局，分别是从1~5
        list: [{
          src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
          title: '标题一',
          desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          url: ''
        }, {
          src: 'http://placeholder.qiniudn.com/60x60/3cc51f/ffffff',
          title: '标题二',
          desc: '由各种物质组成的巨型球状天体，叫做星球。星球有一定的形状，有自己的运行轨道。',
          url: {
            path: '',
            replace: false
          }
        }]
      }
    },
    created () {
      this.showTitle()
    },
    methods: {
      goBack: function () {
        this.$router.go(-1)
      },
      showTitle: function () {
        if (this.contentTip === '0') {
          this.msg = '热门精选'
        } else {
          this.msg = '实时优惠'
        }
      }
    }
  }
</script>
<style scoped lang="sass">
  @import "../../css/hotMore.scss";
</style>

